<template>
	<el-container>
		<el-main>
			<div style="width: 100%;height: 30px;">
				<div style="float: right;">
					<el-button type="primary" plain @click="showCode" size="mini">代码</el-button>
				</div>
			</div>

			<div ref="main" style="width: 600px;height:400px;border: 1px red solid;margin: 50px auto;"></div>

		</el-main>
		<el-aside width="400px">
			<el-collapse v-model="activeNames">
				<el-collapse-item title="整体配置" name="1">
					<div class="collapse-wrap">
						<div style="font-size: 13px;">位置：</div>
						<div style="margin: 0 0 0 30px;">
							<div>顶部：<el-input-number @change="showChart" size="mini"
									v-model="option.grid.top"></el-input-number></div>
							<div>右侧：<el-input-number @change="showChart" size="mini"
									v-model="option.grid.right"></el-input-number></div>
							<div>底部：<el-input-number @change="showChart" size="mini"
									v-model="option.grid.bottom"></el-input-number></div>
							<div>左侧：<el-input-number @change="showChart" size="mini"
									v-model="option.grid.left"></el-input-number></div>
						</div>
						<div>
							<el-radio v-model="vh" label="v" @input="handleVH">垂直</el-radio>
							<el-radio v-model="vh" label="h" @input="handleVH">水平</el-radio>
						</div>
					</div>
				</el-collapse-item>

				<el-collapse-item title="标题" name="2">
					<el-tabs v-model="showTitleTab" type="card">
						<el-tab-pane label="整体" name="1">
							<div class="collapse-wrap">
								<div>
									<div class="label">显示：</div>
									<el-switch v-model="option.title.show" @change="showChart">
									</el-switch>
								</div>
								<div>
									<div class="label">水平位置：</div>
									<el-radio-group v-model="option.title.left" @input="showChart">
										<el-radio label="left">靠左</el-radio>
										<el-radio label="center">居中</el-radio>
										<el-radio label="right">靠右</el-radio>
									</el-radio-group>
								</div>
								<div>
									<div class="label">垂直位置：</div>
									<el-radio-group v-model="option.title.top" @input="showChart">
										<el-radio label="top">靠上</el-radio>
										<el-radio label="middle">居中</el-radio>
										<el-radio label="bottom">靠下</el-radio>
									</el-radio-group>
								</div>
							</div>
						</el-tab-pane>
						<el-tab-pane label="主标题" name="2">
							<el-form ref="form" label-width="80px" style="margin-right: 20px;text-align: left;">
								<el-form-item label="主标题:">
									<el-input v-model="option.title.text" @input="showChart" size="mini"></el-input>
								</el-form-item>
								<el-form-item label="字体粗细:">
									<el-select v-model="option.title.textStyle.fontWeight" size="mini" placeholder="请选择"
										@change="showChart">
										<el-option label="粗体字" value="bold"></el-option>
										<el-option label="普通" value="normal"></el-option>
										<el-option label="细体" value="lighter"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="字体大小:">
									<el-input-number v-model="option.title.textStyle.fontSize" @change="showChart"
										size="mini" :min="1"></el-input-number>
								</el-form-item>
								<el-form-item label="字体颜色:">
									<div class="label-value-color">
										<el-color-picker v-model="option.title.textStyle.color" show-alpha
											@change="showChart" size="mini">
										</el-color-picker>
									</div>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<el-tab-pane label="副标题" name="3">
							<el-form ref="form" label-width="80px" style="margin-right: 20px;text-align: left;">
								<el-form-item label="副标题:">
									<el-input v-model="option.title.subtext" @input="showChart" size="mini"></el-input>
								</el-form-item>
								<el-form-item label="超链接:">
									<el-input v-model="option.title.sublink" @input="showChart" size="mini"></el-input>
								</el-form-item>
								<el-form-item label="字体粗细:">
									<el-select v-model="option.title.subtextStyle.fontWeight" size="mini"
										placeholder="请选择" @change="showChart">
										<el-option label="粗体字" value="bold"></el-option>
										<el-option label="普通" value="normal"></el-option>
										<el-option label="细体" value="lighter"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="字体大小:">
									<el-input-number v-model="option.title.subtextStyle.fontSize" @change="showChart"
										size="mini" :min="1"></el-input-number>
								</el-form-item>
								<el-form-item label="字体颜色:">
									<div class="label-value-color">
										<el-color-picker v-model="option.title.subtextStyle.color" show-alpha
											@change="showChart" size="mini">
										</el-color-picker>
									</div>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</el-collapse-item>

				<el-collapse-item title="图例" name="3">
					<div class="collapse-wrap">
						<div class="row">
							<div class="label">显示：</div>
							<el-switch v-model="option.legend.show" @change="showChart">
							</el-switch>
						</div>
						<div class="row">
							<div class="label">朝向：</div>
							<el-radio-group v-model="option.legend.orient" @input="showChart">
								<el-radio label="horizontal">水平</el-radio>
								<el-radio label="vertical">垂直</el-radio>
							</el-radio-group>
						</div>
						<div class="row">
							<div class="label">水平位置：</div>
							<el-radio-group v-model="option.legend.left" @input="showChart">
								<el-radio label="left">靠左</el-radio>
								<el-radio label="center">居中</el-radio>
								<el-radio label="right">靠右</el-radio>
							</el-radio-group>
						</div>
						<div class="row">
							<div class="label">垂直位置：</div>
							<el-radio-group v-model="option.legend.top" @input="showChart">
								<el-radio label="top">靠上</el-radio>
								<el-radio label="middle">居中</el-radio>
								<el-radio label="bottom">靠下</el-radio>
							</el-radio-group>
						</div>
						<div class="row">
							<div class="label">图例宽度：</div>
							<div class="label-value">
								<el-input-number @change="showChart" size="mini" v-model="option.legend.itemWidth"
									:min="1"></el-input-number>
							</div>
						</div>
						<div class="row">
							<div class="label">图例高度：</div>
							<div class="label-value">
								<el-input-number @change="showChart" size="mini" v-model="option.legend.itemHeight"
									:min="1"></el-input-number>
							</div>
						</div>
						<div class="row">
							<div class="label">字体颜色：</div>
							<div class="label-value">
								<div class="label" style="width:auto;">固定值</div>
								<div class="label-value-color">
									<el-color-picker v-model="legendFontColor" show-alpha @change="setLegendFontColor"
										size="mini">
									</el-color-picker>
								</div>
								<el-checkbox style="margin-left: 50px;" v-model="legendFontColorAuto"
									@change='setLegendFontColorAuto'>自适应</el-checkbox>
							</div>
						</div>
					</div>
				</el-collapse-item>
				<el-collapse-item title="提示框" name="4">
					<div class="collapse-wrap">
						<div class="row">
							<div class="label">显示：</div>
							<el-switch v-model="option.tooltip.show" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">显示样式：</div>
							<el-radio-group v-model="option.tooltip.axisPointer.type" @input="showChart">
								<el-radio label="none">无</el-radio>
								<el-radio label="shadow">阴影</el-radio>
								<el-radio label="line">直线</el-radio>
								<el-radio label="cross">十字</el-radio>
							</el-radio-group>
						</div>
						<div class="row">
							<div class="label">字体大小：</div>
							<el-input-number v-model="option.tooltip.textStyle.fontSize" @change="showChart" size="mini"
								:min="1"></el-input-number>
						</div>
						<div class="row">
							<div class="label">字体颜色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="option.tooltip.textStyle.color" show-alpha @change="showChart"
									size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">显示单位：</div>
							<el-switch v-model="tooltipUnitSwitch" @change="changeTooltipUnitSwitch"></el-switch>
							<div style="display: inline-block;width: 100px;margin-left: 10px;">
								<el-input v-model="tooltipUnit" @input="inputTooltipUnit" size="mini"
									v-show="showtooltipUnit"></el-input>
							</div>
						</div>
						<div class="row">
							<div class="label">背景颜色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="option.tooltip.backgroundColor" show-alpha @change="showChart"
									size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">边框颜色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="option.tooltip.borderColor" show-alpha @change="showChart"
									size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">边框宽度：</div>
							<el-input-number @change="showChart" size="mini"
								v-model="option.tooltip.borderWidth"></el-input-number>
						</div>
					</div>
					</div>
				</el-collapse-item>
				<el-collapse-item title="X轴" name="5">
					<div class="collapse-wrap">
						<div class="row">
							<div class="label">显示轴线：</div>
							<el-switch v-model="option.xAxis.axisLine.show" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">字体大小：</div>
							<el-input-number v-model="option.xAxis.axisLabel.fontSize" @change="showChart" size="mini"
								:min="1"></el-input-number>
						</div>
						<div class="row">
							<div class="label">字体颜色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="option.xAxis.axisLabel.color" show-alpha @change="showChart"
									size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">旋转角度：</div>
							<el-input-number v-model="option.xAxis.axisLabel.rotate" @change="showChart" size="mini"
								:min="-90" :max="90"></el-input-number>
							<span style="font-size: 10px;"> (负数是顺时针，正数是逆时针)</span>
						</div>
						<div class="row">
							<div class="label">显示刻度：</div>
							<el-switch v-model="option.xAxis.axisTick.show" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">刻度对齐：</div>
							<el-switch v-model="option.xAxis.axisTick.alignWithLabel" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">分割线：</div>
							<el-switch v-model="option.xAxis.splitLine.show" @change="showChart"></el-switch>
						</div>

					</div>
				</el-collapse-item>
				<el-collapse-item title="Y轴" name="6">
					<div class="collapse-wrap">
						<div class="row">
							<div class="label">显示轴线：</div>
							<el-switch v-model="option.yAxis.axisLine.show" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">字体大小：</div>
							<el-input-number v-model="option.yAxis.axisLabel.fontSize" @change="showChart" size="mini"
								:min="1"></el-input-number>
						</div>
						<div class="row">
							<div class="label">字体颜色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="option.yAxis.axisLabel.color" show-alpha @change="showChart"
									size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">旋转角度：</div>
							<el-input-number v-model="option.yAxis.axisLabel.rotate" @change="showChart" size="mini"
								:min="-90" :max="90"></el-input-number>
							<span style="font-size: 10px;"> (负数是顺时针，正数是逆时针)</span>
						</div>
						<div class="row">
							<div class="label">显示刻度：</div>
							<el-switch v-model="option.yAxis.axisTick.show" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">刻度对齐：</div>
							<el-switch v-model="option.yAxis.axisTick.alignWithLabel" @change="showChart"></el-switch>
						</div>
						<div class="row">
							<div class="label">分割线：</div>
							<el-switch v-model="option.yAxis.splitLine.show" @change="showChart"></el-switch>
						</div>

					</div>
				</el-collapse-item>
				<el-collapse-item title="销量柱子配置" name="7">
					<div class="collapse-wrap">
						<div class="row">
							<div class="label">柱子前景色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="option.color" show-alpha @change="showChart" size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">柱子背景色：</div>
							<div class="label-value-color">
								<el-color-picker v-model="barBackgroundColor" show-alpha @change="changeBarBackgroundColor"
									size="mini">
								</el-color-picker>
							</div>
						</div>
						<div class="row">
							<div class="label">柱子宽度：</div>
							<div class="label-value">
								<el-select v-model="barWidthType" size="mini" placeholder="请选择"
									@change="changeBarWidthType"
									style="width: 100px;">
									<el-option label="自适应" value="auto"></el-option>
									<el-option label="固定值" value="number"></el-option>
									<el-option label="百分比" value="percent"></el-option>
								</el-select>
								<el-input-number @change="changeBarWidth" 
									size="mini" 
									v-model="barWidth"
									:min="1"
									v-show="showBarWidth"></el-input-number>
							</div>
						</div>
					</div>
				</el-collapse-item>
			</el-collapse>
		</el-aside>
		<el-dialog title="代码" :visible.sync="codeDialogVisible" width="50%" :close-on-click-modal="false">
			<el-input type="textarea" :rows="10" v-model="codeTextarea">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="codeDialogVisible = false">关闭</el-button>
			</span>
		</el-dialog>
	</el-container>
</template>

<script>
	export default {
		data: function() {
			return {
				activeNames: ['1'],
				chart: null,
				codeDialogVisible: false, // 代码对话框
				codeTextarea: '', // 代码
				vh: 'v', // 垂直还是水平，v：表示垂直，h表示水平
				showTitleTab: '1',
				legendFontColor: '', //  图例文字颜色的固定值
				legendFontColorAuto: false, // 图例文字颜色是否自动设置
				tooltipUnitSwitch: false, // 提示框是否显示单位
				tooltipUnit: '', // 提示框中的单位
				showtooltipUnit: false, // 控制提示框中的单位输入框是否显示
				barBackgroundColor:'',// 柱子的背景色
				barWidthType:'自适应',//设置柱子宽度类型
				barWidth:40,// 柱子宽度
				showBarWidth:false,// 控制柱子宽度输入框是否显示
				axisData: ['线裤', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
				option: {
					color: '#5470c6',
					title: {
						show: true,
						text: 'ECharts 入门示例',
						subtext: '副标题',
						sublink: 'http://www.baidu.com',
						left: 'left',
						top: 'top',
						textStyle: {
							color: '#333',
							fontWeight: 'bold',
							fontSize: 18,
						},
						subtextStyle: {
							color: '#aaa',
							fontWeight: 'normal',
							fontSize: 12,
						}
					},
					tooltip: {
						show: true,
						trigger: 'axis', // 
						axisPointer: { // 设置坐标轴指示器，必须搭配 trigger: 'axis' 使用
							type: 'none',
						},
						textStyle: {
							fontSize: 14,
							color: '#333',
						},
						backgroundColor: '#fff',
						borderColor: '#fff',
						borderWidth: 1,
						// valueFormatter: function (value) {
						//   return value + ' 美刀';
						// },
					},
					legend: {
						show: true,
						orient: 'horizontal', // 图例列表的布局朝向,horizontal,vertical
						left: 'center',
						top: 'top',
						itemWidth: 25,
						itemHeight: 14,
						textStyle: {
							color: '#333',
						},
						data: ['销量']
					},
					xAxis: {
						axisLine: { // 不显示坐标轴线
							show: true,
						},
						axisLabel: {
							fontSize: 12,
							color: '#666',
							rotate: 0,
						},
						axisTick: {
							show: true,
							alignWithLabel: false, // 刻度在标签居中位置对齐
						},
						splitLine: {
							show: false,
						}
					},
					yAxis: {
						axisLine: { // 不显示坐标轴线
							show: false,
						},
						axisLabel: {
							fontSize: 12,
							color: '#666',
							rotate: 0,
						},
						axisTick: {
							show: false,
							alignWithLabel: false, // 刻度在标签居中位置对齐
						},
						splitLine: {
							show: true,
						}
					},
					series: [{
						name: '销量',
						type: 'bar',
						data: [50, 20, 36, 10, 10, 20],
						showBackground: false,
						backgroundStyle: {
						}
					}],
					grid: {
						top: 60,
						right: 60,
						bottom: 60,
						left: 60,
					}
				}
			}
		},
		mounted: function() {
			// 基于准备好的dom，初始化echarts实例
			this.chart = this.$echarts.init(this.$refs['main']);
			// 指定图表的配置项和数据
			this.option.xAxis.data = this.axisData
			// this.option.yAxis.data = this.data
			// 使用刚指定的配置项和数据显示图表。
			this.chart.setOption(this.option);
			// 初始化时，设置图例的文字颜色控件的颜色值
			this.legendFontColor = this.option.legend.textStyle.color

			// console.log(this.option.xAxis.axisLine.color)
		},
		methods: {
			// 移动位置等操作，重新设置即可
			showChart() {
				this.chart.setOption(this.option);
			},
			// 垂直柱状图改成水平柱状图，需要clear
			clearAndShowChart() {
				this.chart.clear() // 先清空，否则垂直柱状图不能切换成水平柱状图
				this.chart.setOption(this.option);
			},
			showCode() {
				this.codeDialogVisible = true
				this.codeTextarea = "option=" + JSON.stringify(this.option, function(key, val) {
					if (typeof val === 'function') {
						return val + '';
					}
					return val;
				}, '    ')
				console.log(JSON.stringify(this.option))
			},
			handleVH(value) {
				console.log("value:", value)
				if (value == 'v') { // 垂直
					this.option.xAxis.data = this.axisData
					// this.option.yAxis.data = null
					delete this.option.yAxis['data']
				} else { // 水平
					this.option.yAxis.data = this.axisData
					// this.option.xAxis.data = null
					delete this.option.xAxis['data']
				}
				this.clearAndShowChart()
			},
			// 图例文字颜色设置为自动
			setLegendFontColorAuto(value) {
				console.log("value:", value)
				if (value) {
					this.option.legend.textStyle.color = 'auto'
					this.showChart()
				} else {
					this.option.legend.textStyle.color = this.legendFontColor
					this.showChart()
				}
			},
			setLegendFontColor(value) {
				this.option.legend.textStyle.color = value
				this.showChart()
			},
			changeTooltipUnitSwitch(value) { // 提示框是否显示单位的开关
				if (value) { // 显示单位
					this.inputTooltipUnit(this.tooltipUnit)
					this.showtooltipUnit = true
				} else if (value == false) { // 不显示单位
					delete this.option.tooltip['valueFormatter']
					this.showtooltipUnit = false
				}
				this.clearAndShowChart()
			},
			inputTooltipUnit(val) { // 提示框中的单位发生改变时
				if (this.tooltipUnitSwitch) {
					this.option.tooltip.valueFormatter = function(value) {
						return value + val
					}
				}
				this.showChart()
			},
			changeBarBackgroundColor(val){
				console.log("val:",val)
				if(val == null){
					this.option.series[0].showBackground = false
					delete this.option.series[0].backgroundStyle['color']
				}else{
					this.option.series[0].showBackground = true
					this.option.series[0].backgroundStyle.color = val
				}
				this.showChart()
			},
			changeBarWidthType(val){
				if(val == 'auto'){
					this.showBarWidth = false
					delete this.option.series[0]['barWidth']
					this.clearAndShowChart()
				}else if(val == "number"){
					this.showBarWidth = true
					this.option.series[0].barWidth = this.barWidth
					this.showChart()
				}else if(val=='percent'){
					this.showBarWidth = true
					this.option.series[0].barWidth = this.barWidth+"%"
					this.showChart()
				}
				
				// console.log(this.option.series[0].barWidth)
			},
			changeBarWidth(val){
				if(this.barWidthType == "number"){
					this.option.series[0].barWidth = val
				}else if(this.barWidthType =='percent'){
					this.option.series[0].barWidth = val+"%"
				}
				// console.log(this.option.series[0].barWidth)
				this.showChart()
			}
		}
	}
</script>

<style src="../css/common.css" scoped></style>